.flex {
  display: flex;
}

.flex1 {
  flex: 1;
}

.align_center {
  align-items: center;
}

.align_baseline {
  align-items: baseline;
}

.flex_shrink0 {
  flex-shrink: 0;
}

.flex_align_center {
  display: flex;
  align-items: center;
}

.flex_column {
  display: flex;
  flex-direction: column;
}

.flex_align_center_wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.flex_around {
  display: flex;
  align-items: center;
  justify-content: space-around;
}

.flex_between {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.flex_start {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.flex_end {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.flex_center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.flex_wrap {
  flex-wrap: wrap;
}

.flex_nowrap {
  flex-wrap: nowrap;
}

.flex_column_center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center
}

.fl {
  float: left;
}

.fr {
  float: right;
}

.tc {
  text-align: center;
}

.tr {
  text-align: right;
}

// margin-right
$step: 2;

@for $i from 1 through 20 {
  .mr#{$i * $step} {
    margin-right: $i * $step + px !important;
  }

  .ml#{$i * $step} {
    margin-left: $i * $step + px;
  }

  .mt#{$i * $step} {
    margin-top: $i * $step + px;
  }

  .mb#{$i * $step} {
    margin-bottom: $i * $step + px;
  }

  .pr#{$i * $step} {
    padding-right: $i * $step + px;
  }

  .pl#{$i * $step} {
    padding-left: $i * $step + px;
  }

  .pt#{$i * $step} {
    padding-top: $i * $step + px;
  }

  .pb#{$i * $step} {
    padding-bottom: $i * $step + px;
  }
}

.mb0 {
  margin-bottom: 0 !important;
}

.mr0 {
  margin-right: 0 !important;
}

.pt0 {
  padding-top: 0 !important;
}

.mr5 {
  margin-right: 5px;
}

.mr10 {
  margin-right: 10px;
}

.mt0 {
  margin-top: 0;
}

.mt10 {
  margin-top: 10px;
}

.mb10 {
  margin-bottom: 10px;
}

.mb40 {
  margin-bottom: 40px !important;
}

.mb64 {
  margin-bottom: 64px;
}

.ml0 {
  margin-left: 0 !important;
}

.ml5 {
  margin-left: 5px;
}

.ml10 {
  margin-left: 10px;
}

.p8 {
  padding: 8px;
}

.pb10 {
  padding-bottom: 10px;
}

.c303 {
  color: #303133;
}

.c606 {
  color: #606266;
}

.c909 {
  color: #909399;
}

.padding10 {
  padding: 10px;
}

.pointer {
  cursor: pointer;
}

.f12 {
  font-size: 12px;
}

.f14 {
  font-size: 14px;
}

.f16 {
  font-size: 16px;
}

.fontbold {
  font-family: 'fontbold';
}

.fwb {
  font-family: 'fontbold';
}

.action_column span:not(:last-child) {
  margin-right: 16px;
}

.configurable_table .action_column span:not(:last-child) {
  margin-right: 8px !important;
}

.w100 {
  width: 100% !important;
}

.maxw100 {
  max-width: 100%;
}

.w180 {
  width: 180px !important;
}

.w220 {
  width: 220px !important;
}

.w240 {
  width: 240px !important;
}

.w140 {
  width: 140px !important;
}

.w320 {
  width: 320px;
}

.h100 {
  height: 100% !important;
}

.h_auto {
  height: auto;
}

.w_auto {
  width: auto;
}

.h22 {
  height: 22px;
}

// 禁止点击
.disabled {
  // pointer-events: none;
  cursor: no-drop;
}
// 表格操作列按钮
.to_delete,
.to_link {
  cursor: pointer;
}

.to_link {
  color: var(--el-color-primary);
}

.to_delete {
  color: var(--el-color-danger);
}

.no_click {
  pointer-events: none;
}

.no_click.to_link,
.no_click.to_delete {
  cursor: not-allowed;
}

.no_click.to_link {
  color: #8BAEFF;
}

.no_click.to_delete {
  color: #fab6b6;
}

.no_click_clor.to_link {
  cursor: default;
  color: var(--disable-link-text-color);
}

// 超行文本省略号显示
.show-points {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.show-points2 {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.show-points3 {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

.hidden {
  overflow: hidden;
}

// .warn_text {
//   color:#F53F3F;
// }
// 表单标题
.form_title {
  font-size: 16px;
  display: flex;
  align-items: center;
}

.form_title::before {
  content: "";
  width: 4px;
  height: 18px;
  background-color: var(--el-color-primary);
  border-radius: 2px 0px 0px 2px;
  display: inline-block;
  margin-right: 8px;
}

// 文字状态颜色
.gray_text1 {
  color: var(--text-color1);
}

.gray_text2 {
  color: var(--text-color2);
}

.success_text {
  color: var(--el-color-success);
}

.danger_text {
  color: var(--el-color-danger);
}

.warn_text {
  color: var(--el-color-warning);
}

.primary_text,
.primary_color {
  color: var(--el-color-primary);
}

.basic_text {
  color: var(--el-text-color-regular);
}

.basic_color {
  color: var(--basic-color);
}

// 圆角
.basic_radius {
  border-radius: var(--basic-radius);
}

// 状态样式
@mixin state($color) {
  display: flex;
  align-items: center;
  color: $color;
}

@mixin circle_state($bgColor) {
  content: "";
  width: 5px;
  height: 5px;
  margin-right: 10px;
  border-radius: 50%;
  background-color: $bgColor;
}

.ordinary_state {
  @include state(var(--el-text-color-regular));

  &::before {
    @include circle_state(var(--el-text-color-regular))
  }
}

.gray_state1 {
  @include state(var(--text-color1));

  &::before {
    @include circle_state(var(--text-color1))
  }
}

.gray_state2 {
  @include state(var(--text-color2));

  &::before {
    @include circle_state(var(--text-color2))
  }
}

.success_state {
  @include state(var(--el-color-success));

  &::before {
    @include circle_state(var(--el-color-success))
  }
}

.danger_state {
  @include state(var(--el-color-danger));

  &::before {
    @include circle_state(var(--el-color-danger))
  }
}

.warn_state {
  @include state(var(--el-color-warning));

  &::before {
    @include circle_state(var(--el-color-warning))
  }
}

.primary_state {
  @include state(var(--el-color-primary));

  &::before {
    @include circle_state(var(--el-color-primary))
  }
}

.success_tag {
  border-radius: 2px;
  background: #E8FFEA;
  padding: 0 8px;
  color: #00B42A;
}

.warn_tag {
  border-radius: 2px;
  background: #FFECE8;
  padding: 0 8px;
  color: #F53F3F;
}

.fl {
  float: left;
}

.fr {
  float: right;
}

// 红色小圆点
.small_circle {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--el-color-danger);
  margin-right: 8px;
}

.head_tab {
  padding: 20px 20px 5px;
  background-color: var(--basic-color);
}

.over_hidden {
  overflow: hidden;
}

// 文字波浪效果
.shake_text {
  white-space: nowrap;

  span {
    display: inline-block;
    animation: shake 1s infinite;
    animation-name: shake;
    animation-duration: 1s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
  }
}

@keyframes shake {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(5px);
    /* 上下抖动的距离 */
  }
}

/* 为每个字符添加不同的延迟 */
.shake_text span:nth-child(1) {
  animation-delay: 0s;
}

.shake_text span:nth-child(2) {
  animation-delay: 0.1s;
}

.shake_text span:nth-child(3) {
  animation-delay: 0.2s;
}

.shake_text span:nth-child(4) {
  animation-delay: 0.3s;
}

.shake_text span:nth-child(5) {
  animation-delay: 0.4s;
}

.shake_text span:nth-child(6) {
  animation-delay: 0.5s;
}

.shake_text span:nth-child(7) {
  animation-delay: 0.6s;
}

.shake_text span:nth-child(8) {
  animation-delay: 0.7s;
}

.shake_text span:nth-child(9) {
  animation-delay: 0.8s;
}